<template>
	<view class="evt-card" @contextmenu.prevent="openMenu">
		<view class="title" @click="clickCard">
			{{props.evt.title}}
		</view>
		<view class="time-sys" @click="clickCard">
			<uni-icons type="calendar" style="color: white;"></uni-icons>
			{{props.evt.timeText}} 
			
			<span v-if="props.evt.timeSystem">
				({{props.evt.timeSystem}})
			</span>
		</view>
		
		
		<view class="tags">
			<text class="tag" v-for="tag in props.evt.tags" @click="search(tag)">
				{{tag}}
			</text>
		</view>

		<view class="content" v-if="props.evt.content" @click="clickCard">
			{{props.evt.content.substr(0, maxContent)}} {{props.evt.content.length> maxContent?'……': ''}}
		</view>

		<view class="ulink" v-if="props.evt.link && props.evt.link.length > 0">
			<view class="link" v-for="url in props.evt.link">
				<uni-icons type="link" style="color: white;"></uni-icons>
				<text @click.stop="openLink(url)">{{url}} </text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import * as Dao from '@/common/dao';
	import {useAppStore} from '@/store/appStore'
	const maxContent = 200;

	const props = defineProps({
		evt: {
			type: Object,
			default: {
				title: 'event-card'
			}
		}
	});
	
	const appStore = useAppStore();
	
	function clickCard(e) {
		Dao.focusEvent(props.evt.time, props.evt.groupId, props.evt.title, props.evt.content);
	}

	
	function openLink(url) {
		if (url.indexOf('http') == 0) {
			Dao.openLink(url)
			uni.showLoading({
				title:'跳转中……'
			})
			setTimeout(function() {
				uni.hideLoading()
			}, 1000)
		}else if (url.indexOf('file://') == 0){
			Dao.openLink(url, props.evt.docPath)
		}else {
			Dao.showMsg('不支持的链接', 'warn');
		}
	}
	
	function search(tag){
		appStore.loadEvents(1, 500, tag);
	}
	
	function openMenu(){
		uni.$emit('view-event', props.evt);
	}
</script>

<style scoped lang="scss">
	.evt-card {
		border-radius: 6px;
		border-left: 4px solid var(--color3);
		margin: 5px 10px;
		background-color: var(--background-color);
		display: block;
		min-height: 60px;
		min-width: 180px;
		padding: 10px 5px;
		cursor: pointer;
		transform: scale(1);
		transition: .1s ease-in-out;


		&:hover {
			box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, .4);
			// background-color: #111;
			// border-left-color: #999;
		}
		
		&:active {
			transform: scale(1.05);
		}

		.title {
			font-weight: 700;
			border-bottom: 1px solid #555;
		}

		.content {
			word-wrap: break-word;
			white-space: normal;
			display: block;
		}

		.time-sys {
			font-size: 11px;
			color: #ddd;
			font-weight: 100;
		}

		.ulink {
			color: white;
			
			.link {
				text-decoration: underline;
			}
		}
		
		.tags {
			.tag {
				font-size: 10px;
				font-weight: 400;
				color: white;
				background-color: #e43d33;
				border-radius: 0px 2px 2px 2px;
				line-height: 14px;
				height: 14px;
				padding: 2px;
				margin: 2px;
			}
		}
	}
</style>